<template>
  <a-form layout="horizontal" :form="form" class="form" >
    <a-row :gutter="8">
      <a-col :md="8" :sm="24">
        <a-form-item label="用户名" :labelCol="labelCol" :wrapperCol="wrapperCol">
          <a-input
            v-decorator="[
              'userName',
              {rules: [{ required: true, message: '请输入用户名', whitespace: true}], initialValue: this.initData.userName}
            ]"
            placeholder=""
          />
        </a-form-item>
      </a-col>
      <a-col :md="8" :sm="24">
        <a-form-item label="姓名" :labelCol="labelCol" :wrapperCol="wrapperCol">
          <a-input
            placeholder=""
            v-decorator="[
              'fullName',
              {rules: [{ required: true, message: '请输入姓名', whitespace: true}], initialValue: this.initData.fullName}
            ]"/>
        </a-form-item>
      </a-col>
      <a-col :md="8" :sm="24">
        <a-form-item label="身份证" :labelCol="labelCol" :wrapperCol="wrapperCol">
          <a-input
            placeholder=""
            v-decorator="[
              'idcard',
              {rules: [{ required: false, message: '请输入身份证', whitespace: true}], initialValue: this.initData.idcard}
            ]"/>
        </a-form-item>
      </a-col>
    </a-row>
    <a-row :gutter="8">
      <a-col :md="8" :sm="24">
        <a-form-item label="手机" :labelCol="labelCol" :wrapperCol="wrapperCol">
          <a-input-number
            style="width: 100%"
            v-decorator="[
              'cellphone',
              {rules: [{ required: true, message: '请输入正确的手机', whitespace: true, pattern: /^1[3456789]\d{9}$/}], initialValue: this.initData.cellphone}
            ]"/>
        </a-form-item>
      </a-col>
      <a-col :md="8" :sm="24">
        <a-form-item label="邮箱" :labelCol="labelCol" :wrapperCol="wrapperCol">
          <a-input
            style="width: 100%"
            v-decorator="[
              'email',
              {rules: [{ type: 'email', required: true, message: '请输入正确的邮箱', whitespace: true}, { validator: this.handleEmailCheck } ], initialValue: this.initData.email}
            ]"/>
        </a-form-item>
      </a-col>
      <a-col :md="8" :sm="24">
        <a-form-item label="所属组织" :labelCol="labelCol" :wrapperCol="wrapperCol">
          <a-tree-select
            showSearch
            style="width: 100%"
            :dropdownStyle="{ maxHeight: '400px', overflow: 'auto' }"
            placeholder="请选择"
            allowClear
            treeDefaultExpandAll
            treeNodeFilterProp="title"
            :treeData="orgSelectTreeData"
            @search="onSearchOrgSelectTree"
            @select="onSelectOrgSelectTree"
            v-decorator="[
              'orgId',
              {rules: [{ required: true, message: '请输入用户所在组织', whitespace: true}], initialValue: this.initData.orgId}
            ]"
          >
          </a-tree-select>
        </a-form-item>
      </a-col>
    </a-row>
    <a-row :gutter="8">
      <a-col :md="8" :sm="24">
        <a-form-item label="状态" :labelCol="labelCol" :wrapperCol="wrapperCol">
          <a-select
            placeholder="请选择"
            allowClear
            v-decorator="[
              'status',
              {rules: [{ required: true, message: '请输入状态', whitespace: true}], initialValue: this.initData.statusInit}
            ]"
          >
            <a-select-option value="0">禁用</a-select-option>
            <a-select-option value="1">启用</a-select-option>
          </a-select>
        </a-form-item>
      </a-col>
      <a-col :md="8" :sm="24">
        <a-form-item label="用户类型" :labelCol="labelCol" :wrapperCol="wrapperCol">
          <a-select
            placeholder="请选择"
            allowClear
            v-decorator="[
              'userType',
              {rules: [{ required: true, message: '请输入用户类型', whitespace: true}], initialValue: this.initData.userType}
            ]"
          >
            <a-select-option v-for="item in dictData.userType" :key="item.dictKey" :value="item.dictKey">{{ item.dictValue }}</a-select-option>
          </a-select>
        </a-form-item>
      </a-col>
      <a-col :md="8" :sm="24">
        <a-form-item label="排序" :labelCol="labelCol" :wrapperCol="wrapperCol">
          <a-input-number
            style="width: 100%"
            v-decorator="[
              'orderNo',
              {rules: [{ type: 'number', required: false, message: '请输入排序', whitespace: true}], initialValue: this.initData.orderNo}
            ]"/>
        </a-form-item>
      </a-col>
    </a-row>
    <a-row :gutter="8">
      <a-col :md="8" :sm="24">
        <a-form-item label="昵称" :labelCol="labelCol" :wrapperCol="wrapperCol">
          <a-input
            v-decorator="[
              'nikeName',
              {rules: [{ required: false, message: '请输入昵称', whitespace: true}], initialValue: this.initData.nikeName}
            ]"
            placeholder=""
          />
        </a-form-item>
      </a-col>
      <a-col :md="8" :sm="24">
        <a-form-item label="性别" :labelCol="labelCol" :wrapperCol="wrapperCol">
          <a-select
            placeholder="请选择"
            allowClear
            v-decorator="[
              'sex',
              {rules: [{ required: false, message: '请输入性别', whitespace: true}], initialValue: this.initData.sex}
            ]"
          >
            <a-select-option value="1">男</a-select-option>
            <a-select-option value="2">女</a-select-option>
            <a-select-option value="9">保密</a-select-option>
          </a-select>
        </a-form-item>
      </a-col>
      <a-col :md="8" :sm="24">
        <a-form-item label="出生日期" :labelCol="labelCol" :wrapperCol="wrapperCol">
          <a-date-picker
            v-decorator="[
              'birthday',
              {rules: [{ type: 'object', required: false, message: '请输入出生日期', whitespace: true}], initialValue: this.initData.birthday?moment(this.initData.birthday,'YYYY-MM-DD'):null}
            ]"
            placeholder=""
            style="width: 100%"
          />
        </a-form-item>
      </a-col>
    </a-row>
    <a-row :gutter="8">
      <a-col :md="8" :sm="24">
        <a-form-item label="办公室电话" :labelCol="labelCol" :wrapperCol="wrapperCol">
          <a-input
            v-decorator="[
              'officePhone',
              {rules: [{ required: false, message: '请输入办公室电话', whitespace: true}], initialValue: this.initData.officePhone}
            ]"
            placeholder=""
          />
        </a-form-item>
      </a-col>
      <a-col :md="8" :sm="24">
        <a-form-item label="短号" :labelCol="labelCol" :wrapperCol="wrapperCol">
          <a-input
            v-decorator="[
              'shortPhone',
              {rules: [{ required: false, message: '请输入短号', whitespace: true}], initialValue: this.initData.shortPhone}
            ]"
            placeholder=""
          />
        </a-form-item>
      </a-col>
      <a-col :md="8" :sm="24">
        <a-form-item label="用户ip" :labelCol="labelCol" :wrapperCol="wrapperCol">
          <a-input
            v-decorator="[
              'userIp',
              {rules: [{ required: false, message: '用户ip', whitespace: true}], initialValue: this.initData.userIp}
            ]"
            placeholder=""
          />
        </a-form-item>
      </a-col>
    </a-row>
    <a-row :gutter="8">
      <a-col :md="24" :sm="24">
        <a-form-item label="备注" :labelCol="{xs: { span: 24 },sm: { span: 3 }}" :wrapperCol="{xs: { span: 24 },sm: { span: 21 }}">
          <a-textarea
            placeholder=""
            :rows="4"
            v-decorator="[
              'remarks',
              {rules: [{ required: false, message: '请输入备注', whitespace: true}], initialValue: this.initData.remarks}
            ]"
          />
        </a-form-item>
      </a-col>
    </a-row>
    <a-row :gutter="8" :style="{display:'none'}">
      <a-col :md="8" :sm="24">
        <a-form-item label="用户ID" :labelCol="labelCol" :wrapperCol="wrapperCol">
          <a-input
            disabled
            v-decorator="[
              'userId',
              {rules: [{ required: false, message: '请输入用户Id', whitespace: true}], initialValue: this.initData.userId}
            ]"
            placeholder=""
          />
        </a-form-item>
      </a-col>
      <a-col :md="8" :sm="24">
        <a-form-item label="姓名全拼" :labelCol="labelCol" :wrapperCol="wrapperCol">
          <a-input
            disabled
            v-decorator="[
              'spellAll',
              {rules: [{ required: false, message: '请输入姓名全拼', whitespace: true}], initialValue: this.initData.spellAll}
            ]"
            placeholder=""
          />
        </a-form-item>
      </a-col>
      <a-col :md="8" :sm="24">
        <a-form-item label="姓名首字母" :labelCol="labelCol" :wrapperCol="wrapperCol">
          <a-input
            disabled
            v-decorator="[
              'spellFirst',
              {rules: [{ required: false, message: '请输入姓名首字母', whitespace: true}], initialValue: this.initData.spellFirst}
            ]"
            placeholder=""
          />
        </a-form-item>
      </a-col>
      <a-col :md="8" :sm="24">
        <a-form-item label="头像路径" :labelCol="labelCol" :wrapperCol="wrapperCol">
          <a-input
            disabled
            v-decorator="[
              'photoPath',
              {rules: [{ required: false, message: '请输入头像路径', whitespace: true}], initialValue: this.initData.photoPath}
            ]"
            placeholder=""
          />
        </a-form-item>
      </a-col>
      <a-col :md="8" :sm="24">
        <a-form-item label="地址" :labelCol="labelCol" :wrapperCol="wrapperCol">
          <a-input
            disabled
            v-decorator="[
              'address',
              {rules: [{ required: false, message: '请输入地址', whitespace: true}], initialValue: this.initData.address}
            ]"
            placeholder=""
          />
        </a-form-item>
      </a-col>
      <a-col :md="8" :sm="24">
        <a-form-item label="地址详情" :labelCol="labelCol" :wrapperCol="wrapperCol">
          <a-input
            disabled
            v-decorator="[
              'addressDetail',
              {rules: [{ required: false, message: '请输入地址详情', whitespace: true}], initialValue: this.initData.addressDetail}
            ]"
            placeholder=""
          />
        </a-form-item>
      </a-col>
      
      <a-col :md="8" :sm="24">
        <a-form-item label="用户mac地址" :labelCol="labelCol" :wrapperCol="wrapperCol">
          <a-input
            disabled
            v-decorator="[
              'userMacaddr',
              {rules: [{ required: false, message: '用户mac地址', whitespace: true}], initialValue: this.initData.userMacaddr}
            ]"
            placeholder=""
          />
        </a-form-item>
      </a-col>
    </a-row>
  </a-form>
</template>

<script>
import { getBatchDict, getOrgSelectTree } from "@/services/system/api"
import moment from 'moment'
export default {
  data () {
    return {
      labelCol: {
        xs: { span: 24 },
        sm: { span: 9 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 15 }
      },
      confirmLoading: false,
      dictData: {},
      orgSelectTreeData: [],
      form: this.$form.createForm(this),
      initData: {}
    }
  },
  props: {
    userInfo: {
      type: Object,
      default: () => {},
      required: false
    }
  },
  created () {
    // 数据初始化
    // 数据字典初始化
    if (this.userInfo) {
      const user = this.userInfo
      if (user.status) {
        user.statusInit = '1'
      } else {
        user.statusInit = '0'
      }
      this.initData = user
    } else {
      this.initData = {}
    }
    const params = {}
    params.dictFields = 'userType'
    this.$http.post(getBatchDict,params).then(res => {
      this.dictData = res.result
    })
    // 下拉组织树初始化
    this.$http.post(getOrgSelectTree,params).then(res => {
      this.orgSelectTreeData = res.result
    })
  },
  methods: {
    moment,
    handleEmailCheck (rule, value, callback) {
      callback()
    },
    onSearchOrgSelectTree () {
      console.log(...arguments)
    },
    onSelectOrgSelectTree () {
      console.log(...arguments)
    }
  }
}
</script>
